<template>
	<view class="info">
		<view class="form">
			<u--form labelPosition="left" labelWidth="100" :model="model1" :rules="rules" ref="uForm">
				<u-form-item label="头像" prop="updateInfo.name" borderBottom>
					<image v-if="updateInfo.avatar&&show==1"  :src="updateInfo.avatar" mode="aspectFill" class="pic">
					<!-- 	<u-button type="primary" style="width: 0rpx;">更换头像</u-button> -->
						<uni-file-picker
						   :auto-upload="false"
							v-model="updateInfo.avatar" 
							file-extname="jpg,png,gif,webp"
							mode="grid"
							limit="1"
							:image-styles="imageStyles"
							@select="success"
						/>
				</u-form-item>

				<u-form-item label="姓名" prop="updateInfo.nickname" borderBottom>
					<u--input v-model="updateInfo.nickname" border="none" placeholder="请输入昵称"></u--input>
				</u-form-item>

				<u-form-item label="手机号" prop="updateInfo.mobile" borderBottom>
					<u--input v-model="updateInfo.mobile" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>

				<u-form-item label="性别" prop="updateInfo.gander" borderBottom>
					<u--input v-model="updateInfo.gander" border="none"></u--input>
				</u-form-item>

			</u--form>
		</view>

		<view class="save">
			<u-button type="error" shape="circle" @click="updateuserInfo()">修改信息</u-button>
		</view>
	</view>
</template>

<script>
	const CloudUser=uniCloud.importObject("users")
	export default {
		data() {
			return {
				updateInfo:"",
				img:"",
				imgUrl:"",
				imgName:"",
				show:1,
			}
		},
		onShow() {
			console.log(uni.getStorageSync("uni-id-pages-userInfo")._id);
			this.getuserInfo(uni.getStorageSync("uni-id-pages-userInfo")._id)
			this.imgUrl=this.updateInfo.avatar
		},
		methods: {
                success(e){
					console.log(e);
					this.imgUrl=e.tempFiles[0].path;
					this.imgName=e.tempFiles[0].name;
					this.show=2;
				},
				
				getuserInfo(user_id){
					CloudUser.getuserInfo(user_id).then(res=>{
						console.log(res);
						this.updateInfo=res.data[0];
					})
				},
				
				async updateuserInfo(){
					console.log(1);
                   if(this.imgUrl!=this.updateInfo.avatar||!this.updateInfo.avatar){
					this.img = await uniCloud.uploadFile({
						filePath: this.imgUrl,
						cloudPath: this.imgName
					 })
					}
					console.log(1);
					CloudUser.updateuserInfo({
						user_id:uni.getStorageSync("uni-id-pages-userInfo")._id,
						avatar:this.img.fileID||this.updateInfo.avatar,
						nickname:this.updateInfo.nickname,
						mobile:this.updateInfo.phoneNumer,
						gander:this.updateInfo.gander,
					}).then(res=>{
						console.log(res);
					})
				}
		}
	}
</script>

<style lang="scss">
	.form {
		width: var(--status-bar-width);
		padding: 0 20rpx;
	}

	.item4 {
		display: flex;
		justify-content: space-between;
	}

	.save {
		width: 100%;
		position: fixed;
		bottom: var(--window-bottom, 0);
		box-sizing: content-box;
	}
	
	.pic{
		width: 100rpx;
		height: 100rpx;
	}
</style>